<template>
    <div class="page-container">
        <div class="headButton" @click="backHome"></div>
        <!-- 缩放容器：承载所有内容，基于原9600*2240分辨率 -->
        <div class="scale-container">
            <div class="hero-container">
                <div class="hero-section hero-left">
                </div>
                <div class="hero-section hero-middle">
                    <div class="video-wrapper">
                        <video class="center-video" src="/video/company.mp4" autoplay muted loop controls>
                            您的浏览器不支持视频播放
                        </video>
                    </div>
                </div>
                <div class="hero-section hero-right">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
//路由
import { useRouter } from 'vue-router'
const router = useRouter();
//跳转路由
const backHome = () => {
    router.push({ name: 'home' })
}
</script>

<style scoped>
.headButton {
    z-index: 999;
    cursor: pointer;
    display: flex;
    float: inline-end;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 78px;
    height: 78px;
    background-image: url("/imgs/ningbo/cancel.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* 可视区域容器：固定为目标分辨率6240*1456 */
.page-container {
    width: 6240px;
    height: 1456px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

/* 原始设计稿容器：基于9600*2240，通过缩放适配新分辨率 */
.scale-container {
    width: 9600px;
    height: 2240px;
    transform: scale(0.65);
    transform-origin: 0 0;
    position: relative;
    display: flex;
    flex-direction: row;
}

/* 整体容器：三栏Flex布局 */
.hero-container {
    display: flex;
    width: 100%;
    overflow: hidden;

    background-image: url("/imgs/company/图层 1559.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* 左/右区域通用样式 */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hero-left {
    position: relative;
    left: 300px;
    transform: scaleX(0.65);
    align-self: anchor-center;
    flex: 1;
    width: 1720px;
    height: 1078px;
    background-image: url("/imgs/company/组 7776.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.hero-right {
    position: relative;
    right: 300px;
    transform: scaleX(0.65);
    align-self: anchor-center;
    flex: 1;
    width: 1720px;
    height: 1078px;
    background-image: url("/imgs/company/组 7776 拷贝.png");
    background-position: left;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* 文字框样式（左/右通用） */
.text-box {
    width: 80%;
    padding: 20px;
    border: 1px dashed rgba(46, 183, 229, 0.5);
    box-shadow: 0 0 10px rgba(46, 183, 229, 0.3);
    text-align: center;
}

.top-text,
.bottom-text {
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* 箭头样式 */
.arrow {
    color: #37ADFF;
    font-size: 20px;
    text-shadow: 0 0 5px #37ADFF;
}

/* 主文字样式（汽车行业/汽车强国） */
.main-text {
    font-size: 3rem;
    margin: 15px 0;
    color: #37ADFF;
    text-shadow: 0 0 15px #37ADFF, 0 0 5px rgba(46, 183, 229, 0.5);
}

/* 中间视频区域样式 */
.hero-middle {
    flex: 2;
    /* 中间区域宽度是左右的2倍 */
    background: url("/path/to/tech-bg.png") center/cover no-repeat;
    /* 科技感背景图 */
}

.video-wrapper {
    /* width: 100%; */
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 视频样式 */
.center-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    /* 视频半透明，透出背景科技感 */
}

/* Logo叠加层（视频上方） */
.logo-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.center-logo {
    width: 120px;
    /* 根据实际Logo尺寸调整 */
    opacity: 0.95;
}

.logo-text {
    color: #fff;
    font-size: 20px;
    margin-top: 8px;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
</style>